<template>
  <div class="tool-box-panel">
    <el-scrollbar style="height:100%;">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="绘图" name="1">
          <item :actions="DrawToolbarActions" />
        </el-collapse-item>
        <el-collapse-item title="编辑" name="2">
          <item :actions="DrawToolbarActions" />
        </el-collapse-item>
        <el-collapse-item title="通风" name="3">
          <item :actions="DrawToolbarActions" />
        </el-collapse-item>
      </el-collapse>
    </el-scrollbar>
  </div>
</template>

<script>
import DrawToolbarActions from '@/views/editor/actions/toolbar'
import Item from './item.vue'

export default {
  components: { Item },
  data() {
    return {
      activeNames: ['1', '2', '3'],
      DrawToolbarActions
    }
  }
}
</script>

<style lang="scss">
@import '../../style/variable.scss';
.tool-box-panel {
  height: 100%;
  @extend %toolbar-color;

  display: flex;
  flex-direction: column;
  align-items: stretch;

  .fixed-item {
    flex-grow: 0;
    height: 20px !important;
  }

  .box-item {
    flex: 1;
  }
  @import '../../style/scrollbar.scss';
  @import '../../style/panel.scss';
}
</style>
